<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./boostrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <header class="col-md-2">
                <h1 class="logo">
                    <a href="#">
                        <span class="hidden-sm hidden-md hidden-lg">阿里百秀</span>
                        <img src="./images/logo.png" alt="" class="hidden-xs">
                    </a>
                </h1>
                <ul class="nav">
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-camera"></i>
                            生活馆
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-picture"></i>
                            自然汇
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-phone"></i>
                            科技潮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-gift"></i>
                            奇趣事
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-glass"></i>
                            美食杰
                        </a>
                    </li>
                </ul>
            </header>
            <article class="col-md-7">
                <div class="pic">
                    <div class="pic_left hidden-xs">
                        <a href="#">
                            <img src="./upload/hots_1.jpg" alt="">
                        </a>
                    </div>
                    <div class="pic_right">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="./upload/hots_2.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./upload/hots_3.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./upload/hots_4.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./upload/hots_5.jpg" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="news">
                    <ul>
                        <li class="row">
                            <div class="col-md-9">
                                <h3>又现酒窝夹笔盖新技能 城里人是不让人活了！</h3>
                                <p class="text-muted hidden-xs">
                                    DUX主题小秘 发布于 2020-9-1 分类: 奇趣事 阅读: (2421) 评论: (143)
                                </p>


                                <p class=" hidden-xs">
                                    你们城里人真会玩，又是反手摸肚脐炫腹，锁骨放硬币秀胸的，现在又来酒窝夹笔盖晒脸！别以为我不知道你们在想什么！！哼还让不让人活了
                                </p>

                                <p class="text-muted">
                                    阅读(2417)评论(1)赞 (18) 标签：时尚 / 护肤 / 美妆 / 健康 / 趣味生活
                                </p>
                            </div>
                            <div class="col-md-3 news_pic hidden-xs hidden-sm">
                                <img src="./upload/hots_4.jpg" alt="">
                            </div>
                        </li>
                        <li class="row">
                            <div class="col-md-9">
                                <h3>又现酒窝夹笔盖新技能 城里人是不让人活了！</h3>
                                <p class="text-muted hidden-xs">
                                    DUX主题小秘 发布于 2020-9-1 分类: 奇趣事 阅读: (2421) 评论: (143)
                                </p>


                                <p class=" hidden-xs">
                                    你们城里人真会玩，又是反手摸肚脐炫腹，锁骨放硬币秀胸的，现在又来酒窝夹笔盖晒脸！别以为我不知道你们在想什么！！哼还让不让人活了
                                </p>

                                <p class="text-muted">
                                    阅读(2417)评论(1)赞 (18) 标签：时尚 / 护肤 / 美妆 / 健康 / 趣味生活
                                </p>
                            </div>
                            <div class="col-md-3 news_pic hidden-xs hidden-sm">
                                <img src="./upload/hots_4.jpg" alt="">
                            </div>
                        </li>
                        <li class="row">
                            <div class="col-md-9">
                                <h3>又现酒窝夹笔盖新技能 城里人是不让人活了！</h3>
                                <p class="text-muted hidden-xs">
                                    DUX主题小秘 发布于 2020-9-1 分类: 奇趣事 阅读: (2421) 评论: (143)
                                </p>


                                <p class=" hidden-xs">
                                    你们城里人真会玩，又是反手摸肚脐炫腹，锁骨放硬币秀胸的，现在又来酒窝夹笔盖晒脸！别以为我不知道你们在想什么！！哼还让不让人活了
                                </p>

                                <p class="text-muted">
                                    阅读(2417)评论(1)赞 (18) 标签：时尚 / 护肤 / 美妆 / 健康 / 趣味生活
                                </p>
                            </div>
                            <div class="col-md-3 news_pic hidden-xs hidden-sm">
                                <img src="./upload/hots_4.jpg" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
            </article>
            <aside class="col-md-3">
                <div class="slogan">
                    <img src="./upload/zgboke.jpg" alt="">
                </div>
                <div class="hot">
                    <div class="search btn btn-primary">热搜</div>
                    <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                    <p>
                        这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台....
                    </p>
                </div>
            </aside>
        </div>
    </div>
</body>

</html>